<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航菜单</title>
  <style>
    * {
      margin:0px;
      padding:0px;
      list-style: none;
      font-size: 14px;
      color:#333;
    }
    *.clear {
      clear:both;
    }
    #nav {
      margin: auto;
      width:1000px;
      margin-top:30px;
    }
    li.nav_li {
      list-style: none;
      float:left;
    }
    #nav dt {
      width: 130px;
      height:36px;
      background:#339;
      color:#fff;
      font-weight: bold;
      border-right:1px solid #fff;
      text-align: center;
      cursor: pointer;
    }
    #nav dt span {
      color:#fff;
      position: relative;
      top:8px;
    }
    #nav dd {
      width: 130px;
      height:36px;
      background: #393;
      color:#fff;
      border-bottom:1px solid #fff;
      text-align:center;
      cursor: pointer;
      display:none;
    }
    #nav dd:hover {
      background: #933;
    }
    #nav dd span {
      color:#fff;
      position: relative;
      top:8px;
    }
  </style>
  <script>
    //此时body这些还没有渲染
    window.onload = function(){
      //所有页面加载完成之后执行代码
      // alert("hello")
      //DOM操作 Document Object Model
      var ns = document.getElementsByClassName("nav_li");
      console.log(ns.length);
      // alert(ns.length);
      for(var i=0;i<ns.length;i++) {
        //得到了具体的一个li节点
        var n = ns[i];
        //绑定一个事件，当鼠标移动上去的时候显示dd
        n.onmouseover = function() {
          //鼠标移动进去时的代码
          // console.log(this.innerHTML);
          var ds = this.getElementsByTagName("dd");
          //遍历每个dd节点，显示样式
          for(var j=0;j<ds.length;j++) {
            ds[j].style.display = "block";
          }
        }
        n.onmouseout = function() {
          var ds = this.getElementsByTagName("dd");
          for(var j=0;j<ds.length;j++) {
            ds[j].style.display = "none";
          }
        }
      }
    }
  </script>
</head>
<body>
  <ul id="nav">
    <li class="nav_li">
      <dl>
        <dt><span>系统管理</span></dt>
        <dd><span>导航菜单</span></dd>
        <dd><span>导航菜单</span></dd>
        <dd><span>导航菜单</span></dd>
        <dd><span>导航菜单</span></dd>
        <dd><span>导航菜单</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>用户管理</span></dt>
        <dd><span>用户信息</span></dd>
        <dd><span>添加用户</span></dd>
        <dd><span>删除用户</span></dd>
        <dd><span>导出用户</span></dd>
        <dd><span>导出用户</span></dd>
        <dd><span>导出用户</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>菜单管理</span></dt>
        <dd><span>菜单列表</span></dd>
        <dd><span>用户信息</span></dd>
        <dd><span>添加菜单</span></dd>
        <dd><span>删除菜单</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>校园新闻</span></dt>
        <dd><span>用户信息</span></dd>
        <dd><span>添加菜单</span></dd>
        <dd><span>主要新闻</span></dd>
        <dd><span>删除菜单</span></dd>
        <dd><span>删除菜单</span></dd>
        <dd><span>删除菜单</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>学习资源</span></dt>
        <dd><span>用户信息</span></dd>
        <dd><span>添加菜单</span></dd>
        <dd><span>主要新闻</span></dd>
        <dd><span>删除菜单</span></dd>
        <dd><span>删除菜单</span></dd>
        <dd><span>删除菜单</span></dd>
        <dd><span>添加菜单</span></dd>
        <dd><span>添加菜单</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>联系我们</span></dt>
        <dd><span>用户信息</span></dd>
        <dd><span>添加菜单</span></dd>
        <dd><span>主要新闻</span></dd>
        <dd><span>删除菜单</span></dd>
        <dd><span>添加菜单</span></dd>
        <dd><span>添加菜单</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>投诉建议</span></dt>
        <dd><span>删除菜单</span></dd>
        <dd><span>添加菜单</span></dd>
        <dd><span>主要新闻</span></dd>
        <dd><span>删除菜单</span></dd>
        <dd><span>添加菜单</span></dd>
      </dl>
    </li>
    <li class="clear"></li>
  </ul>
</body>
</html>